<!DOCTYPE html>
<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
    <title>综合示例演示注册</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app" style="margin: 0px auto; width: 1000px; height: 610px;">
	<h2 style="text-align: center;">填写个人信息11</h2>
	<div style="width: 500px; float: left;">
		<div style="margin-left: 30px;">
			<form>
				姓名: <input type="text" name="user" v-model="user"><br><br>
				<fieldset style="margin-right: 30px;" >
					<legend>健康信息</legend>
					身高：<input type="text" v-model="height"> 
					体重：<input type="text" v-model="weight">
				</fieldset><br>
				性别:
				<input type="radio" value="男" v-model="sex"> 
				<label>男</label> 
				<input type="radio" value="女" v-model="sex"> 
				<label>女</label><br><br>
				喜爱的运动:<br><br> 
				<input type="checkbox" value="篮球" v-model="checkedNames"> 
				<label>篮球</label> 
				<input type="checkbox" value="足球" v-model="checkedNames"> 
				<label>足球</label> 
				<input type="checkbox" value="羽毛球" v-model="checkedNames"> 
				<label>羽毛球</label> 
				<input type="checkbox" value="跑步" v-model="checkedNames"> 
				<label>跑步</label><br><br> 
				<label>地址:</label> 
				<select name="ciyt" v-model="address">
					<option value="北京">
						北京
					</option><option value="上海">
						上海
					</option><option value="广州">
						广州
					</option><option value="深圳">
						深圳
					</option>
				</select> <br><br>
				个人简介: <br> 
				<textarea cols="50" rows="6" v-model="profile"></textarea><br><br> 
				<div style="text-align: center;"><input type="submit" value="提交"> 
				<input type="reset" value="重置"></div></form></div></div> 
				<div style="width: 500px; float: right;">
				<div style="margin-left: 30px;">
					姓名:{{user}} <br><br><br>
					身高:{{height}}<br>
					体重:{{weight}}<br><br>
					性别:{{sex}}<br><br>
					喜爱的运动:{{checkedNames}}<br><br><br><br>
					地址:{{address}}<br><br>
					个人简介:{{profile}}
			</div></div></div>		
		
<script src="vue.js"></script>
<script type="text/javascript">
	var vm= new Vue({
		el:'#app',
		data: {
			user: '',
			height: '',
			weight: '',
			sex: '',
			checkedNames: [],
			address: '',
			profile: '',
			citys:["北京","上海","广州","深圳"]
		}
	})	
</script>

</body></html>